<script lang="ts">
	import _loadingJPG from '$lib/empty/loading-img.svg';
	import { debounce_lazy_load_images } from '$utils/lazy';
	import { classMap } from '@smui/common/internal';
	import { onMount } from 'svelte';

	let className: string = '';
	export let src = '';
	export let alt = 'none';
	export let style = '';
	export { className as class };

	let imgSrc = _loadingJPG;

	onMount(debounce_lazy_load_images);
</script>

<!-- 
	fadeOption={{ duration: 20, delay: 0 }} 
	height="fit-content"
-->
<div
	class={classMap({
		'-zdy-svelte-picture': className ? false : true,
		[className]: className ? true : false
	})}
>
	<slot />
	<img
		draggable="false"
		class="lazy-load w-full aspect-1/1 object-cover bg-gray-2"
		src={imgSrc}
		data-src={src}
		{alt}
		{style}
	/>
</div>
